<template>
  <div style="position: relative">
    <el-table
      ref="handSelectTest_multipleTable"
      v-loading.lock="loading"
      :data="tableData"
      :cell-style="columnStyle"
      :stripe="stripe"
      highlight-current-row
      :row-key="rowKey"
      :max-height="curHeight"
      :lazy="lazy"
      :load="load"
      border
      :span-method="arraySpanMethod"
      :header-cell-style="{
        'text-align': 'left',
        color: '#333',
        'border-color': '#F2F2F2!important',
      }"
      style="width: 100%; margin: 0 auto; overflow: auto"
      @select="select"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="iSselection"
        :selectable="selectableRow"
        type="selection"
        fixed
        width="45"
        align="center"
      />
      <el-table-column
        v-if="showIndex"
        type="index"
        label="编号"
        align="left"
        :index="indexFn1"
        :column-key="columnKey"
        width="60"
      />
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.key"
        align="left"
        :label="item.title"
        :fixed="item.fixed"
        :filter-method="item.filterTag"
        filter-placement="bottom-start"
        :show-overflow-tooltip="item.tooltip?false:true"
        :sortable="item.sortable"
        :width="item['width'] || item['minWidth']"
      >
        <template slot-scope="scope">
          <ex-slot
            v-if="item.render"
            :render="item.render"
            :row="scope.row"
            :index="scope.$index"
            :column="item"
          />
          <span v-else>{{
            scope.row[item.key] == null ? "-" : scope.row[item.key]
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tableOption.label"
        :width="tableOption.width"
        :label="tableOption.label"
        align="left"
        class-name="small-padding fixed-width"
      />
    </el-table>
    <el-pagination
      v-if="isPagin"
      style="text-align: center; margin-top: 20px; width: 100%"
      :current-page="currentPage"
      :page-size="pageSize"
      :layout="layout"
      :total="totalLength"
      :page-sizes="pageSizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import Sortable from "sortablejs";
// 自定义内容的组件 -E
var exSlot = {
  functional: true,
  props: {
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null,
    },
  },
  render: (h, data) => {
    const params = {
      row: data.data.attrs.row,
      index: data.props.index,
    };
    if (data.props.columns) params.columns = data.props.columns;
    return data.props.render(h, params);
  },
};
export default {
  // name: 'elTable',
  components: { exSlot },
  props: {
    columns: {
      type: Array,
      default: function () {
        return [];
      },
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    tableData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    tableOption: {
      type: Object,
      default: () => {
        return {};
      },
    },
    curHeight: {
      type: Number,
      default: 0,
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    columnKey: {
      type: String,
      default: "",
    },
    arraySpanMethod: {
      type: Function,
      default: () => () => {},
    },
    summaryMethod: {
      type: Function,
      default: () => () => {},
    },
    offsetTop: {
      type: Number,
      default: 175,
    },
    lazy: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    load: {
      type: Function,
      default: () => () => {},
    },
    iSselection: {
      type: Boolean,
      default: false,
    },
    showIndex: {
      type: Boolean,
      default: true,
    },
    handleSelectionChange: {
      type: Function,
      default: () => () => {},
    },
    select: {
      type: Function,
      default: () => () => {},
    },
    selectableRow: {
      type: Function,
      default: () => () => {},
    },
    isPagin: {
      type: Boolean,
      default: false,
    },
    handleSizeChange: {
      type: Function,
      default: () => () => {},
    },
    handleCurrentChange: {
      type: Function,
      default: () => () => {},
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    pageSizes: {
      type: Array,
      default: () => [],
    },
    rowKey: {
      type: String,
      default: "",
    },
    totalLength: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  created() {},
  computed: {
    layout() {
      if (this.pageSizes.length)
        return "total,sizes, prev, pager, next, jumper";
      return "total, prev, pager, next, jumper";
    },
  },
  methods: {
    // rowKey(row) {
    //   return row.id;
    // },
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
          _this.tableData = _this.tableData.filter(({ adId }) => adId !== 0);

          _this.tableData.forEach((item, index) => {
            _this.sortString += item.adId + ":" + (index + 1) + ",";
          });
          _this.sortString = _this.sortString.substr(
            0,
            _this.sortString.length - 1
          );
        },
      });
    },
    indexFn1(index) {
      index = index + 1 + (this.currentPage - 1) * this.pageSize;
      return index;
    },
    columnStyle({ row, column, rowIndex, columnIndex }) {
      // eslint-disable-next-line eqeqeq
      if (rowIndex == 0 || rowIndex % 2 == 0) {
        return "text-align:center;color:#333;padding: 12px 0;border-color: #F2F2F2!important;";
      } else {
        return "text-align:center;background:rgba(36, 116, 251,.03);color:#333;padding: 12px 0;border-color: #F2F2F2!important;";
      }
    },
  },
};
</script>
<style>
.el-tooltip__popper {
  max-width: 50% !important;
}
</style>
<style scoped>
.el-table::before {
  height: 0px !important;
}
.el-checkbox__inner {
  width: 16px !important;
  height: 16px !important;
  border: 1px solid #2474fb !important;
}
.el-checkbox__input.is-disabled .el-checkbox__inner {
  border: 1px solid #2474fb !important;
}
.el-checkbox__inner::after {
  height: 8px !important;
  left: 5px !important;
}
.el-table th > .cell {
  white-space: nowrap !important;
}
::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}
.el-table__fixed::before {
  height: 0px !important;
}

.el-table /deep/ .el-table__fixed-right::before,
.el-table /deep/ .el-table__fixed::before {
  height: 0 !important;
}
.el-table /deep/ .el-table--border td {
  border-color: #f2f2f2 !important;
}
.el-pagination /deep/ .el-input__inner {
  /* width: 30px; */
  height: 16px;
  border-radius: 2px;
}
.el-pagination /deep/ .btn-prev {
  background: transparent !important;
}
.el-pagination /deep/ .el-pager .number {
  background: transparent !important;
}
.el-pagination /deep/ .el-pager .active {
  color: #00a096 !important;
}
.el-pagination /deep/ .btn-next {
  background: transparent !important;
}
.el-table /deep/ .cell button {
  padding: 0 !important;
  min-width: 43px !important;
  font-size: 14px !important;
}
</style>
